<template>
	<view>
		<view class="header">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" duration="1000">
				<swiper-item>
					<image src="/static/1.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/2.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image src="/static/3.jpg"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view>美食</view>
			<view>装修</view>
			<view>洗浴</view>
			<view>汽车</view>
			<view>唱歌</view>
			<view>住宿</view>
			<view>学习</view>
			<view>工作</view>
			<view>结婚</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
swiper{
	width: 750rpx;
	height: 400rpx;
	
	image{
		width: 100%;
		height: 100%;
	}
}
.content{
	// display: flex;
	// flex-wrap: wrap;
	// height: 100%;
	// view{
	// 	width: calc((750rpx - 8px)/3);
	// 	height: 200rpx;
	// 	background-color: #fff;
	// 	display: flex;
	// 	flex-direction: column;
	// 	justify-content: center;
	// 	align-items: center;
	// 	border: 1rpx solid rgb(219, 219, 219);
	// 	margin: 1rpx 1rpx 0rpx 1rpx;
	// }
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: repeat(3,1fr);
	gap: 1rpx;
	
	grid-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		border: 1rpx solid rgb(219, 219, 219);
	}
}
</style>
